import React, { Component } from 'react'

export default class App extends Component {
  state={
    uname:"yaya"
  }
  
  f1=(e)=>{
    //--setState方法需要修改数据 修改虚拟Dom 映射到真实Dom 重绘组件
    //--整个过程非常耗时,所以设计为了异步方法
    //--所以setState之后立即获取数据,得到的是旧的值
    //--如果想要获取新值,需要在setState的回调函数中实现
    console.log(e.target.value)
    this.setState({uname:e.target.value},()=>{
      console.log(this.state.uname);
    })
  }

  /*
    受控组件:
      由于表单项只能被用户控制 或 被数据绑定项控制,只能二选一
      所以 受控组件方案 选择 使用数据绑定项控制表单
      则,用户输入将会无效
      此时可以为表单项配置onChange事件
      触发事件时,在函数中修改数据绑定项,最终修改到表单项,解决用户输入问题
  */
  render() {
    return (
      <>
        <h2>受控组件 - 使用state绑定表单项</h2>
        <input 
          placeholder='请输入登录名称' 
          value={this.state.uname} 
          onChange={this.f1}
        ></input>
      </>
    )
  }
}
